<div id="adv_{$pos.id}" class="adv-wrap" style="padding: {$pos.padding};margin:{$pos.margin};">
    <div >
        {if condition="count($list) gt 0"}
            {switch name="pos.style"}
                {case value="2"}
                    <!--轮播效果2-->
                    <script src="__LIB__/kinmaxshow/js/kinmaxshow.min.js"></script>
                    <div>
                        <div id="slide_{$pos.id}" style="display: none">
                            {volist name="list" id="vo"}
                                <div>
                                    <a href="{$vo.url}" target="_blank" title="{$vo.title}">
                                        <img src="{$vo.pic|pic}"
                                             alt="{$vo.title}" class="img-responsive" >
                                    </a>
                                </div>
                            {/volist}
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(function () {
                            var h_s = "{$pos.height}";
                            var w_s = "1160px";
                            $("#slide_{$pos.id}").kinMaxShow({
                                height: h_s,
                                button:{
                                      //设置按钮上面不显示数字索引(默认也是不显示索引)
                                      showIndex:false,
                                      //按钮常规下 样式设置 ，css写法，
                                      //类似jQuery的 $('xxx').css({key:value,……})中css写法。  
                                      //【友情提示：可以设置透明度哦 不用区分浏览器
                                      //统一为 opacity，CSS3属性也支持哦
                                      //如：设置按钮圆角、投影等，只不过IE8及以下不支持】  
                                      normal:{background:'#fff',
                                      marginRight:'8px',border:'0',right:'50%',bottom:'30px'},
                                      //当前焦点图按钮样式 设置，写法同上
                                      focus:{background:'#f60',border:'0'}
                                },
                                callback:function(index,action){
                                           
                                               
                                }
                            });
                            var w_a = "KMSPrefix_slide_{$pos.id}_image_item";
                            $("." +w_a + " a").css({"width": w_s,"margin":"0 auto"});
                            $("#slide_{$pos.id}").fadeIn();
                        })
                    </script>
                    <!--轮播效果2END-->
                {/case}
                {case value="3"}
                    <!--轮播效果3 Flickity 风格 START-->
                    <style>
                        .flickity-content {
                            max-width:1600px;
                            margin:0 auto;
                        }
                        .gallery-cell {
                            width:100%;
                            height:auto;
                            overflow:hidden;
                        }
                        .gallery-cell a img {
                            width:100%;
                        }
                    </style>
                    <link href="https://cdn.bootcss.com/flickity/2.1.0/flickity.min.css" rel="stylesheet" media="screen">
                    <script src="https://cdn.bootcss.com/flickity/2.1.0/flickity.pkgd.min.js"></script>
                      <div id="slide_{$pos.id}">
                        <div class="flickity-content js-flickity" id="main-gallery" data-flickity-options='{ "cellAlign": "left", "contain": true,"autoplay": true,"wrapAround": true}'>
                            {volist name="list" id="vo"}
                                <div class="gallery-cell">
                                    <a href="{$vo.url}" target="_blank" title="{$vo.title}">
                                        <img src="{$vo.pic|pic}"
                                             alt="{$vo.title}" class="img-responsive" >
                                    </a>
                                </div>
                            {/volist}
                        </div>
                      </div>
                    <!--轮播效果3END-->
                {/case}


                {default /}
                <!--默认轮播效果Swiper-->
                <link href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.min.css" rel="stylesheet" type="text/css">
                <script type="text/javascript" src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.jquery.min.js"></script>

                <div class="swiper-container" data-role="muuadv_swiper">
                    <div class="swiper-wrapper">
                    {volist name="list" id="data"}
                        <div class="swiper-slide">
                             <a title="{$data.title|text}" href="{$data.url}">
                                <img src="{$data.pic|pic}" alt="{$data.title}" class="img-responsive" >
                            </a>
                        </div>
                    {/volist}
                    </div>
                    <!-- 如果需要导航按钮 -->
                    <div class="swiper-button-prev swiper-button-white"></div>
                    <div class="swiper-button-next swiper-button-white"></div> <!-- 白色 -->
                    
                    <!-- 如果需要滚动条 -->
                    <div class="swiper-scrollbar"></div>
                </div>
                <script>
                $(function(){
                    var mySwiper = new Swiper ('.swiper-container[data-role="muuadv_swiper"]', {
                    loop: true,
                    
                    // 如果需要分页器
                    pagination: '.swiper-pagination',
                    
                    // 如果需要前进后退按钮
                    nextButton: '.swiper-button-next',
                    prevButton: '.swiper-button-prev',
                    
                    // 如果需要滚动条
                    scrollbar: '.swiper-scrollbar',
                  })        
                });
                </script>
            {/switch}
        {/if}
    </div>
</div>
